/* eslint-disable react/prop-types */

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as Helper from 'Helper';

import ConfirmDialog from 'components/ConfirmDialog';
import Pagination from 'components/Pagination';
import MyWorkList from '../components/MyWorkList';

import * as uploadAction from './UploadsAction';

@connect(null, buildActionDispatcher)
export default class UploadsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.navigateTo = this.navigateTo.bind(this);
    this.onModalSubmit = this.onModalSubmit.bind(this);
    this.onModalClose = this.onModalClose.bind(this);
    this.showConfirmDialog = this.showConfirmDialog.bind(this);
    this.closeDialog = this.closeDialog.bind(this);
    this.delete = this.delete.bind(this);
    this.state = {
      pageId: 0,
      limit: 20,
    };
  }

  navigateTo(pageId, limit = 20) {
    const { uploadAction } = this.props;
    uploadAction.getMyUploadsWorks(pageId, limit).then((data) => {
      const pageCount = Helper.calculatePageCount(data.totalCount, limit);
      this.setState({
        totalCount: data.totalCount,
        workList: data.assetList,
        pageId,
        limit,
        pageCount,
      });
    });
  }

  onModalSubmit() {
    this.resolveModal();
  }

  onModalClose() {
    this.rejectModal();
  }

  componentDidMount() {
    this.navigateTo(0);
  }

  showConfirmDialog(options) {
    window.setTimeout(() => {
      this.setState({
        dialogTitle: options.title,
        dialogBody: options.body,
        dialogOkLabel: options.okLabel,
        dialogCancelLabel: options.cancelLabel,
        dialogFooterLabel: options.footer,
        dialogVisibility: true,
      });
    }, 0);
    const promise = new Promise((resolve, reject) => {
      this.resolveModal = resolve;
      this.rejectModal = reject;
    });
    return promise;
  }

  closeDialog() {
    this.setState({ dialogVisibility: false });
  }

  delete(workId) {
    const { uploadAction } = this.props;
    this.showConfirmDialog({
      title: '删除作品',
      body: '确认要删除该作品吗？',
      okLabel: '删除',
      cancelLabel: '取消',
    }).then(() => uploadAction.deleteWork(workId)).then(() => {
      this.closeDialog();
    }).then(() => {
      this.navigateTo(this.state.pageId, this.state.limit);
    }).catch(() => {
      this.closeDialog();
    });
  }

  render() {
    return (
      <div id="work-upload">
        {this.state.totalCount >= 0 &&
          <MyWorkList
            title="我的 / 已上传"
            totalCount={this.state.totalCount}
            workList={this.state.workList}
            router={this.props.router}
            location={this.props.location}
            delete={this.delete}
          />
        }
        {this.state.totalCount > 0 &&
          <Pagination
            currentPageIndex={this.state.pageId}
            pageLimit={this.state.limit}
            totalPagesCount={this.state.pageCount}
            onNavigateTo={this.navigateTo}
          />
        }
        {this.state.totalCount === 0 &&
          <div className="empty">
            <p className="message">您使用 CastBox 上传的作品将会显示在这里</p>
            <p>
              <a target="_blank"
                rel="noopener noreferrer"
                href="https://store.hypereal.com/#/app/1791507">
                <button>获取 CASTBOX</button>
              </a>
            </p>
          </div>
        }
        <ConfirmDialog
          title={this.state.dialogTitle}
          body={this.state.dialogBody}
          okText={this.state.dialogOkLabel}
          cancelText={this.state.dialogCancelLabel}
          footer={this.state.dialogFooterLabel}
          modalVisibility={this.state.dialogVisibility}
          onSubmit={this.onModalSubmit}
          onModalClose={this.onModalClose}
        />
      </div>
    );
  }
}

function buildActionDispatcher(dispatch) {
  return {
    uploadAction: bindActionCreators(uploadAction, dispatch),
  };
}
